<!-- 底部菜单 -->
<template>
    <div class="menu-bottom">
        <div :class="['menu-btn menu-bookshelf',{chosed:chose==1}]" @click="goModule('bookshelf',1)">
            书架
        </div>
        <div :class="['menu-btn menu-library',{chosed:chose==2}]" @click="goModule('library',2)">
            图书馆
        </div>
        <div :class="['menu-btn menu-task',{chosed:chose==4}]" v-show="type==0" @click="goModule('taskList',4)">
            任务中心
        </div>
        <div :class="['menu-btn menu-class',{chosed:chose==5}]" v-show="type==1" @click="goModule('classTeacher',5)">
            班级主页
        </div>
        <div :class="['menu-btn menu-user',{chosed:chose==3}]"  @click="goModule('user',3)">
            个人中心
        </div>
    </div>
</template>

<script>

export default {
    name: "menuB",
    props:[
        "chose",
    ],
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            menuList:[],
        }
    },
    watch:{
        
    },
    created(){ 
        this.menuList=[
            {
                name:'书架',
                type:'bookshelf',
            },
            {
                name:'图书馆',
                type:'library',
            },
            {
                name:'个人中心',
                type:'user',
            },
        ]
    },
    mounted(){
    },
    methods:{
        goModule(page,i){
            if(this.$route.path != ('/'+page)){
                if(this.$route.path=='/bookshelf'){
                    this.$router.push({path:'/'+page,query: {}});
                }else{
                    this.$router.replace({path:'/'+page,query: {}});
                }    
            }
        },
    }
}
</script>
<style type="text/css" scoped>
.menu-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #dadada;
    background: rgba(255,255,255,.96);
    width: 100%;
    box-sizing: border-box;
    /* padding: 0 0.32rem; */
    display:-webkit-box;  
	display:-webkit-flex; 
	display: flex;
	-webkit-justify-content: space-around;
    justify-content: space-around;
    z-index: 100;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.menu-btn{
    color: #666;
    height: 1rem;
    box-sizing: border-box;
    font-size: 0.2rem;
    padding-top: 0.7rem;
    text-align: center;
    line-height: 1;
    width: 1.16rem;
    background:no-repeat center 0.1rem;
    background-size: 0.62rem 0.56rem; 
}
.menu-bookshelf{
    background-image:url(~@/assets/img/menu/bookshelf.png); 
}
.menu-bookshelf.chosed{
    background-image:url(~@/assets/img/menu/bookshelf-c.png);
}
.menu-library{
    background-image:url(~@/assets/img/menu/library.png);
}
.menu-library.chosed{
    background-image:url(~@/assets/img/menu/library-c.png);
}
.menu-task{
    background-image:url(~@/assets/img/menu/task.png);
}
.menu-task.chosed{
    background-image:url(~@/assets/img/menu/task-c.png);
}
.menu-class{
    background-image:url(~@/assets/img/menu/class.png);
}
.menu-class.chosed{
    background-image:url(~@/assets/img/menu/class-c.png);
}
.menu-user{
    background-image:url(~@/assets/img/menu/user.png);
}
.menu-user.chosed{
    background-image:url(~@/assets/img/menu/user-c.png);
}

</style>